<template>
	<view>
		<view class="indexTop">
			<search :searchTxt="searchTxt" @goSearch="goSearch" @delSearchTxt="delSearchTxt" fromPage="ddsList"/>
			<zxs-filter
				currPage="ddsPage"
				:levelArr="levelArr"
				:levelIndex="levelIndex"
				:sortArr="sortArr"
				:sortIndex="sortIndex"
				:sexArr="sexArr"
				:sexIndex="sexIndex"
				:provName="provName"
				:cityName="cityName"
				:permissionNum="permissionNum"
				:locProv="locProv"
				:locCity="locCity"
				:showAreaFlag="showAreaFlag"
				@bindDdsLevelFilter="bindDdsLevelFilter"
				@bindSortFilter="bindSortFilter"
				@bindSexFilter="bindSexFilter"
				@goFilter="goFilter"
				@selectCity="selectCity"
				@resetDistrict="resetDistrict"
				@toggleAreaPicker="toggleAreaPicker"
				@goAuthLoc="goAuthLoc"
				@selLocArea="selLocArea"
			></zxs-filter>
		</view>
		<template v-if="isHasDataFlag == false">
			<no-data></no-data>
		</template>
		<template v-else-if="isHasDataFlag">
			<view class="ddsList"
				v-for="(item,index) in ddsList"
				:key="item.id"
				@tap="goDdsDet(item.id)"
			>
				<image class="ddsHead" src="../../static/images/defHead.png" v-if="item.zjImg == ''"></image>
				<image class="ddsHead" :src="getCloudFilePath(item.zjImg)" v-else></image>
				<view class="ddsInfo">
					<view class="userName">
						<text class="name">{{item.userName}}</text>
						<text class="sex iconfont icon-nan" v-if="item.sex == '男'"></text>
						<text class="sex iconfont icon-nv" v-else></text>
						<text v-if="item.ddsLevel == -1">预注册督导师</text>
						<text v-else-if="item.ddsLevel == 1">初级督导师</text>
						<text v-else-if="item.ddsLevel == 2">中级督导师</text>
						<text v-else-if="item.ddsLevel == 3">高级督导师</text>
					</view>
					<view class="loc">{{item.prov}}-{{item.city}}</view>
					<view class="loc" v-if="item.serviceHours > 0">督导时长：{{item.serviceHours}}小时</view>
					<view class="loc" v-if="item.serviceTimes > 0">督导数：{{item.serviceTimes}}次</view>
					<view class="listTag">
						<view class="tag"
							v-for="(itemInner,indexInner) in toArrayFuns((item.ddsStyle || ''),',')"
							:key="indexInner" 
						>{{itemInner}}</view>
					</view>
				</view>
			</view>
			<loading-view :loading="loading"></loading-view>
		</template>
		<uni-popup type="center" ref="locAuthPop" :maskClick="false">
			<view class="applyQxPop">
				<view class="applyTit">允许"和心云"使用您的位置?</view>
				<view class="applyCon">开启定位权限将为您推荐附近的督导师</view>
				<view class="applyBtn">
					<view class="btnItem" @tap="notAllowed">暂不</view>
					<view class="btnItem" @tap="goAuthPermission">授权</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="denyAuthPop" :maskClick="false">
			<view class="applyQxPop">
				<view class="applyTit">已拒绝位置授权提示</view>
				<view class="applyCon">系统检测您已拒绝获取您当前的位置信息授权,点击设置去开启</view>
				<view class="applyBtn">
					<view class="btnItem" @tap="notAllowed_deny">暂不</view>
					<view class="btnItem" @tap="goSettingAuth">去设置</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Search from '../index/components/Search'
	import ZxsFilter from '../index/components/ZxsFilter'
	const amapFile = require('@/common/amap-wx.js') //引入高德地图 ，根据自己放置的文件路径来决定
	const myAmapFun = new amapFile.AMapWX({
		key: '8a0cb04ab5cdb554786d64863a1fcc30'
	}); 
	import { getDdsList } from '@/api/dds'
	export default {
		components: {
			Search,
			ZxsFilter
		},
		data() {
			return {
				searchTxt:'请输入督导师姓名',
				provName : '全国',
				provName_new:'', 
				cityName : '',
				levelArr:[{name:'等级(全部)',id:''},{name:'预注册',id:'-1'},{name:'初级',id:'1'},{name:'中级',id:'2'},{name:'高级',id:'3'}],
				levelIndex:0,
				ddsLevelVal:'',
				sortArr:[{name:'排序(不限)',id:''},{name:'等级',id:'level'},{name:'评价次数',id:'pjTimes'},{name:'好评次数',id:'hpTimes'}],
				sortIndex:0,
				sortVal:'',
				sexArr:[{name:'性别(不限)',id:''},{name:'男',id:'男'},{name:'女',id:'女'}],
				sexIndex:0,
				sexVal:'',
				nowPage : 1,
				loading : false,
				isHasDataFlag:true,
				ddsList:[],
				isRefreshFlag:false,
				showAreaFlag:false,
				hasNextFlag:null,
				permissionNum:-4,//1已经获取权限 0 为获取
				locProv:'',
				locCity:''
			}
		},
		computed:{
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			}
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading && this.hasNextFlag){
				this.loadDdsList();
			}
		},
		onLoad(){
			this.loadDdsList();
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
		},
		onShow(){
			if(this.isRefreshFlag){
				this.resetDistrict();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods: {
			loadDdsList(){
				let { nowPage,ddsList } = this;
				this.loading = true;
				var userName = this.searchTxt == '请输入督导师姓名' ? '' : this.searchTxt;
				var field = { userName,prov:this.provName_new,city:this.cityName,sex:this.sexVal,
								ddsLevel:this.ddsLevelVal,sortType:this.sortVal,page:this.nowPage,limit:this.limit };
				getDdsList(field).then(res=>{
					//console.log(res);
					nowPage += 1;
					this.hasNextFlag = res.data.hasNext;
					ddsList.push( ...res.data.datas );
					this.ddsList = ddsList;
					this.nowPage = nowPage;
					this.loading = false;
					this.isHasDataFlag = true;
				}).catch(err=>{
					if(this.nowPage > 1 ){
						this.isHasDataFlag=true;
						this.loading = false;
					}else{
						this.loading = false;
						this.isHasDataFlag=false;
					}
					//console.log(err)
				})
			},
			goDdsDet(id){
				uni.navigateTo({
					url:'/pages/subIndex/ddsDet/ddsDet?detId=' + id
				})
			},
			maskClick(obj){
				if(!obj.show){
					setTimeout(()=>{
						uni.showTabBar();
					},300)
				}
			},
			goSearch(){
				uni.navigateTo({
					url:"../subIndex/search/search?searchType=ddsSearch"
				})
			},
			delSearchTxt(){
				this.searchTxt = '请输入督导师姓名';
				this.resetDistrict();
			},
			resetDistrict(){
				this.provName = '全国';
				this.provName_new = '';
				this.cityName = '';
				this.initParams();
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.ddsList = [];
				this.showAreaFlag = false;
				setTimeout(()=>{
					uni.showTabBar();
				},300)
				this.loadDdsList();
			},
			selLocArea(){
				this.provName = this.locProv;
				this.provName_new = this.locProv;
				this.cityName = this.locCity;
				this.initParams();
			},
			toggleAreaPicker(isShow){
				this.showAreaFlag = isShow;
				if(uni.getStorageSync('provName')){
					this.permissionNum = 1
					this.locProv = uni.getStorageSync('provName');
					this.locCity = uni.getStorageSync('cityName');
				}
				if(isShow){
					uni.hideTabBar();
				}else{
					setTimeout(()=>{
						uni.showTabBar();
					},200)
				}
			},
			goAuthLoc(){
				this.$refs.locAuthPop.open();
			},
			notAllowed(){
				this.$refs.locAuthPop.close();
			},
			goAuthPermission(){
				uni.showLoading({ title: '授权中...', mask: true });
				uni.getFuzzyLocation({
					type:'wgs84',
					success: async(res)=>{
						uni.hideLoading();
						let { longitude, latitude } = res;
						myAmapFun.getRegeo({
							location: `${longitude},${latitude}`,
							success: (res) => {
								let { regeocodeData } = res[0];
								uni.setStorageSync('provName',regeocodeData.addressComponent.province);
								uni.setStorageSync('cityName',regeocodeData.addressComponent.city);
								this.provName =  uni.getStorageSync('provName');
								this.provName_new = uni.getStorageSync('provName');
								this.cityName =  uni.getStorageSync('cityName');
								this.$refs.locAuthPop.close();
								this.initParams();
							},
							fail: (err) => {}
						})
					},
					fail:(err)=>{
						uni.hideLoading();
						this.$refs.locAuthPop.close();
						this.$refs.denyAuthPop.open();
					}
				});
			},
			notAllowed_deny(){
				this.$refs.denyAuthPop.close();
			},
			//开启位置权限
			goSettingAuth(){
				this.$refs.denyAuthPop.close();
				uni.openSetting({
					success :(res)=> {
						if(res.authSetting['scope.userFuzzyLocation']){
							this.goAuthPermission();
						}
					}
				})
			},
			selectCity(e){
				this.provName = e.province;
				this.provName_new = e.province == '全国' ? '' : e.province;
				this.cityName = e.city == '不限城市' ? '' : e.city;
				this.initParams();
			},
			//排序筛选
			bindSortFilter(index){
				this.sortIndex = index;
				this.sortVal = this.sortArr[index].id;
				this.initParams();
			},
			//等级筛选
			bindDdsLevelFilter(index){
				this.levelIndex = index;
				this.ddsLevelVal = this.levelArr[index].id;
				this.initParams();
			},
			bindSexFilter(index){
				this.sexIndex = index;
				this.sexVal = this.sexArr[index].id;
				this.initParams();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/applyLocPop.scss';
	.indexTop{
		position:sticky;
		left: 0;
		top: 0;
		z-index: 100;
		background: #fff;
	}
	.ddsList{
		padding: 30rpx 30rpx 20rpx;
		display: flex;
		border-bottom: 1rpx solid #eee;
		.ddsHead{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 15rpx;
		}
		.ddsInfo{
			flex: 1;
			.userName{
				font-weight: normal;
				color: $pss-text-colora;
				font-size: 26rpx;
				margin-bottom: 10rpx;
			}
			.name{
				font-weight: 600;
				font-size: 32rpx;
				color: $pss-text-color3;
			}
			.sex{
				margin: 0 10rpx;
				font-size: 24rpx;
				&.icon-nan{
					color: #1890ff;
				}
				&.icon-nv{
					font-size: 28rpx;
					color: #ef5757;
				}
			}
			.loc{
				font-size: 26rpx;
				color: $pss-text-color8;
			}
			.listTag{
				display: flex;
				flex-wrap: wrap;
				margin-top: 5rpx;
				.tag{
					padding: 0 10rpx;
					font-size: 24rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background: #fef9f5;
					color: $pss-color-primary_1;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>
